﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">

    <title>基础的Bootstrap页面</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">


	<style>
	body {
		padding-top: 50px;
		padding-bottom: 0px;
	}
	.footer {
		background-color: #252525;
		color: #BDBDBD;
		border-top: 1px solid #E5E5E5;
		margin-top: 70px;
		padding: 30px 0;
		text-align: center;
	}
	
	.xc-tab-content {
		padding-top: 10px;
		padding-bottom: 5px;
	}
	
	.xc-right-tab {
		padding: 15px;
		border-style: solid;
		border-color: #DDDDDD;
		border-top-width: 0;
		border-right-width: 0;
		border-bottom-width: 0.1em;
		border-left-width: 0.1em;
	}
	
	.xc-topempty-tab {
		padding: 15px;
		border-style: solid;
		border-color: #DDDDDD;
		border-top-width: 0;
		border-right-width: 0;
		border-bottom-width: 0;
		border-left-width: 0.1em;
	}
	
	.thumbnail {
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		padding: 15px;
		-moz-transition: all 0.2s ease-in-out 0s;
		border: 1px solid #DDDDDD;
		border-radius: 4px 4px 4px 4px;		
		display: block;
		line-height: 20px;		
	}
	
	.thumbnail:hover {
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
	}
	
	</style>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
			  <li class="active"><a href="#">Link</a></li>
			  <li><a href="#">Link</a></li>
			  <li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
				<ul class="dropdown-menu">
				  <li><a href="#">Action</a></li>
				  <li><a href="#">Another action</a></li>
				  <li><a href="#">Something else here</a></li>
				  <li class="divider"></li>
				  <li><a href="#">Separated link</a></li>
				  <li class="divider"></li>
				  <li><a href="#">One more separated link</a></li>
				</ul>
			  </li>
			</ul>
		  
		  <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">登录</button>
          </form>
        </div><!-- /.nav-collapse -->
        
      </div>
    </div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
	  <div class="row">
		<!-- Nav tabs -->
		<ul class="nav nav-pills">
		  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
		  <li><a href="#profile" data-toggle="tab">Profile</a></li>
		  <li><a href="#messages" data-toggle="tab">Messages</a></li>
		  <li><a href="#settings" data-toggle="tab">Settings</a></li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content">
		  <div class="tab-pane active" id="home">...1</div>
		  <div class="tab-pane" id="profile">...2</div>
		  <div class="tab-pane" id="messages">...3</div>
		  <div class="tab-pane" id="settings">...4</div>
		</div>
	  </div>
	  <div class="row">
		<div class="thumbnail">
			<p>
				<ul>
					<li><a>南方高温 8省市未来三天预计达41℃</a></li>
					<li><a>南方高温 8省市未来三天预计达41℃</a></li>
				</ul>					
			</p>
			<p>中新网8月6日电 中央气象台发布最新天气预报，预计，6～8日，浙江中北部、上海、安徽南部、福建中部、江西中部、湖南北部和东部、湖北东南部、重庆西南部等地的部分地区最高气温可达40～41℃。</p>
		</div>
	  </div>
	  
	  <hr>
	  <div class="row">
		<ul class="breadcrumb">
			<li><a href="#">首页</a></li>
			<li><a href="#">Library</a></li>
			<li class="active">Data</li>
		</ul>
		<div class="col-md-9">
			<div class="page-header">
				<h2>南方迎今年最强高温 8省市未来三天预计达41℃ <small>中国新闻网</small></h2>
			</div>
			<p>中新网8月6日电 中央气象台发布最新天气预报，预计，6～8日，浙江中北部、上海、安徽南部、福建中部、江西中部、湖南北部和东部、湖北东南部、重庆西南部等地的部分地区最高气温可达40～41℃。</p>
			<p>中新网8月6日电 中央气象台发布最新天气预报，预计，6～8日，浙江中北部、上海、安徽南部、福建中部、江西中部、湖南北部和东部、湖北东南部、重庆西南部等地的部分地区最高气温可达40～41℃。</p>
			<p>中新网8月6日电 中央气象台发布最新天气预报，预计，6～8日，浙江中北部、上海、安徽南部、福建中部、江西中部、湖南北部和东部、湖北东南部、重庆西南部等地的部分地区最高气温可达40～41℃。</p>
			<p>中新网8月6日电 中央气象台发布最新天气预报，预计，6～8日，浙江中北部、上海、安徽南部、福建中部、江西中部、湖南北部和东部、湖北东南部、重庆西南部等地的部分地区最高气温可达40～41℃。</p>
			<p>中新网8月6日电 中央气象台发布最新天气预报，预计，6～8日，浙江中北部、上海、安徽南部、福建中部、江西中部、湖南北部和东部、湖北东南部、重庆西南部等地的部分地区最高气温可达40～41℃。</p>
			<br>
			<br>
			<div class="well">
				<h4><strong>评论</strong></h4>
				<!-- Nav tabs -->
				<ul class="nav nav-tabs">
				  <li class="active"><a href="#newComment" data-toggle="tab">最新评价</a></li>
				  <li><a href="#hotComment" data-toggle="tab">最热评价</a></li>
				</ul>
				<!-- Tab panes -->
				<div class="tab-content xc-topempty-tab">
				  <div class="tab-pane active" id="newComment">
					<div class="row">
						<ul>
							<li><a>南方高温 8省市未来三天预计达41℃</a></li>
							<li><a>南方高温 8省市未来三天预计达41℃</a></li>
						</ul>					
					</div>
				  </div>
				  <div class="tab-pane" id="hotComment">
					<div class="row">
						<ul>
							<li><a>国外高温 8省市未来三天预计达41℃</a></li>
							<li><a>国外高温 8省市未来三天预计达41℃</a></li>
							<li><a>国外高温 8省市未来三天预计达41℃</a></li>
						</ul>					
					</div>
				  </div>				  
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<!-- Nav tabs -->
			<ul class="nav nav-tabs">
			  <li class="active"><a href="#home2" data-toggle="tab">国内</a></li>
			  <li><a href="#profile2" data-toggle="tab">国外</a></li>
			  <li><a href="#messages2" data-toggle="tab">广东</a></li>
			</ul>
			<!-- Tab panes -->
			<div class="tab-content xc-topempty-tab">
			  <div class="tab-pane active" id="home2">
				<div class="row">
					<ul>
						<li><a>南方高温 8省市未来三天预计达41℃</a></li>
						<li><a>南方高温 8省市未来三天预计达41℃</a></li>
					</ul>					
				</div>
			  </div>
			  <div class="tab-pane" id="profile2">
				<div class="row">
					<ul>
						<li><a>国外高温 8省市未来三天预计达41℃</a></li>
						<li><a>国外高温 8省市未来三天预计达41℃</a></li>
						<li><a>国外高温 8省市未来三天预计达41℃</a></li>
					</ul>					
				</div>
			  </div>
			  <div class="tab-pane" id="messages2">...3</div>
			</div>
			<!-- Nav tabs -->
			<ul class="nav nav-tabs">
			  <li class="active"><a href="#home2" data-toggle="tab">国内</a></li>
			  <li><a href="#profile2" data-toggle="tab">国外</a></li>
			  <li><a href="#messages2" data-toggle="tab">广东</a></li>
			</ul>
			<!-- Tab panes -->
			<div class="tab-content xc-topempty-tab">
			  <div class="tab-pane active" id="home2">
				<div class="row">
					<ul>
						<li><a>南方高温 8省市未来三天预计达41℃</a></li>
						<li><a>南方高温 8省市未来三天预计达41℃</a></li>
					</ul>					
				</div>
			  </div>
			  <div class="tab-pane" id="profile2">
				<div class="row">
					<ul>
						<li><a>国外高温 8省市未来三天预计达41℃</a></li>
						<li><a>国外高温 8省市未来三天预计达41℃</a></li>
						<li><a>国外高温 8省市未来三天预计达41℃</a></li>
					</ul>					
				</div>
			  </div>
			  <div class="tab-pane" id="messages2">...3</div>
			</div>
			
			<div class="thumbnail">
				<p>
					<ul>
						<li><a>南方高温 8省市未来三天预计达41℃</a></li>
						<li><a>南方高温 8省市未来三天预计达41℃</a></li>
					</ul>					
				</p>
				<p>中新网8月6日电 中央气象台发布最新天气预报，预计，6～8日，浙江中北部、上海、安徽南部、福建中部、江西中部、湖南北部和东部、湖北东南部、重庆西南部等地的部分地区最高气温可达40～41℃。</p>
			</div>
			
			<div class="xc-right-tab">
				<p>中新网8月6日电 中央气象台发布最新天气预报</p>
				<p>中新网8月6日电 中央气象台发布最新天气预报</p>
				<p>中新网8月6日电 中央气象台发布最新天气预报</p>
			</div>
			<div class="xc-right-tab">
				<p>中新网8月6日电 中央气象台发布最新天气预报</p>
				<p>中新网8月6日电 中央气象台发布最新天气预报</p>
				<p>中新网8月6日电 中央气象台发布最新天气预报</p>
			</div>
			
		</div>
	  </div>
      <hr>

      <footer>
        <p>&copy; Company 2013</p>
      </footer>
    </div> <!-- /container -->
	
	<!-- Footer================================================== -->
    <footer class="footer">
      <div class="container text-center">
        <p>&copy; 2013 时光的灰烬作者 版权所有</p>
        <p>本网站绝大部分代码为作者本人编写，部分代码来自的开源项目，网站仅供学习使用，需要用于商业用途请与作者联系。</p>
        <ul class="list-inline">
          <li><a href="about.html" target="_blank">关于</a></li>
          <li class="muted">&middot;</li>
          <li><a href="#" target="_blank">问题反馈</a></li>
          <li class="muted">&middot;</li>
          <li><a href="#">版本变更记录</a></li>
          <li><a href="#" target="_blank">作者：miraclelord@163.com</a></li>
        </ul>
      </div>
    </footer>
	
	
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
	
  </body>
</html>
